<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blooria</title>
    <link rel="icon" href="assets/img/favicon.ico" type="image/gif" sizes="16x16">
    <link rel="stylesheet" href="assets/css/base-style.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/dark-light.js"></script>
</head>
<body class="placeholder">
    <div class="loader-wrapper">
        <div class="count"></div> 
        <div class="loader"></div>
        <div class="loader2"></div>
    </div>
<!-- header area start from here-->
<!-- header area start from here-->
<header class="header-area ">
    <div class="container">
        <div class="header-wrapper d-flex align-items-center justify-content-between">
            <!--header-logo-->
            <div class="header-logo">
                <a href="homepage.html">Blooria</a>
            </div>
            <!-- menu-bar -->
            <div class="menu-bar">
                <ul class="d-flex align-items-center justify-content-between">
                    <li><a href="#">Home</a>
                        <ul class="dropdown">
                            <li><a href="homepage.html">Home</a></li>
                            <li><a href="homepage-sidebar.html">Home With Sidebar</a></li>
                            <li><a href="homepage-minimal.html">Home Minimal</a></li>
                            <li><a href="home-sidebar-minimal.html">Home Minimal Two</a></li>
                        </ul>
                    </li>
                    <li><a href="author.html">Authors</a></li>
                    <li><a href="#">Shop</a>
                        <ul class="dropdown">
                            <li><a href="shop-page.html">Product</a></li>
                            <li><a href="product-details.html">Product Details</a></li>
                            <li><a href="card.html">Cart</a></li>
                            <li><a href="checkout.html">Checkout</a></li>
                            <li><a href="account-two.html">Account</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Pages</a>
                        <ul class="dropdown">
                            <li><a href="premium-page.html"> Premium Page</a></li>
                            <li><a href="single-author.html">Single Author</a></li>
                            <li><a href="style-guide.html">Style Guide</a></li>
                            <li><a href="single-blog.html">Single Blog</a></li>
                            <li><a href="single-tag.html">Single Tag</a></li>
                            <li><a href="single-left-sidebar.html">Single With Left sidebar</a></li>
                            <li><a href="single-right-sidebar.html">Single With Right sidebar</a></li>
                        </ul>
                    </li>
                    <li><a href="membership.html">Membership</a></li>
                    <li><a href="tag-page.html">Tag</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="account-page.html">Account</a></li>
                </ul>
            </div>
            <!-- sign-in area -->
            <div class="sign-in-area">
                <ul class="d-flex align-items-center justify-content-between">
                    <li class="popup"><img src="assets/img/svg/search.svg" alt=""></li>
                    <li class="dark-light"><img src="assets/img/svg/dark-light.svg" alt=""></li>
                    <li class="sign-click relative">Sign in
                        <!-- sign-in dropdawn -->
                        <div class="sign-in-card">
                            <h3>Welcome back.</h3>
                            <p>Sign in to get personalized story recommendations, ollow authors and topics you love, and interact with stories.</p>
                            <div class="input-group-icon radious-6 mb-30">
                                <input type="email" placeholder="Type your email...">
                                <img src="assets/img/svg/mail-sign.svg" alt="">
                            </div>
                            <div class="sign-link">
                                <p>Don't have an account?</p>
                                <a href="#">Sign Up</a>
                            </div>
                        </div>
                    </li>
                    <li>
                         <!--mobile menu icon-->
                        <div class="menu-toggole">
                            <span class="menu-show comon-tab">
                                <img src="assets/img/svg/toggle.svg" alt="">                
                            </span>
                            <span class="menu-close comon-tab">
                                <img src="assets/img/svg/close.svg" alt="">            
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- menu search popup -->
    <div class="search-popup-area">
        <div class="search-option">
            <div class="search-box">
                <img src="assets/img/svg/search.svg" alt="">
                <input id="search" name="search" type="text" data-list=".data-list" placeholder="Type your keywords...">
            </div>
            <div class="data-list-wrapper">
                <ul class="data-list">
                    <li>
                        <a href="">
                           <div class="search-content">
                                 <div class="search-title">
                                    <h4>Ingredients to look for in skin care products <span>April 30, 2019</span></h4>
                                </div>
                                <p>Read our top seven health benefits of fishing to learn why, whether you're a match angler or a weekend hobbyist.</p>
                           </div>
                           <img src="assets/img/svg/arrow-left.svg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                           <div class="search-content">
                                 <div class="search-title">
                                    <h4>Sky Parachute Adventure <span>April 25, 2019</span></h4>
                                </div>
                                <p>Muay Thai (Thai boxing) is the most popular contact sport in Thailand, and a pillar of Thai culture, so much so that for years the Thai government has been asking, unsuccessfully, for it to be included as an Olympic sport. </p>
                           </div>
                           <img src="assets/img/svg/arrow-left.svg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                           <div class="search-content">
                                 <div class="search-title">
                                    <h4>Small boy and girl on road<span>April 18, 2019</span></h4>
                                </div>
                                <p>Many parents are tired of the pink and blue divide in the toy aisles. Just last month, the White House held a conference in toys and media, with many toy manufacturers and experts attending. After feedback, Target announced in 2015 that it would get rid of signs labeling toys for boys or for girls</p>
                           </div>
                           <img src="assets/img/svg/arrow-left.svg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                           <div class="search-content">
                                 <div class="search-title">
                                    <h4>Colorful women digital art face<span>April 21, 2019</span></h4>
                                </div>
                                <p>The first thing I do before starting an illustration is to browse through my folder of inspiration. Inside are plenty of sub-folders, containing images of lighting, faces, human figures, clothing, illustrations from my favourite artists, animals, caterpillars, flowers and plenty more besides.</p>
                           </div>
                           <img src="assets/img/svg/arrow-left.svg" alt="">
                        </a>
                    </li>
                   
                </ul>
            </div>
        </div>
        <div class="popup-close-icon">
            <img src="assets/img/svg/close-icon.svg" alt="">
        </div>
    </div>
</header>
<!-- style guide section start here -->
<div class="style-guide-banner section-bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 m-auto">
                <div class="style-banner-heading">
                    <h2>Style Guide</h2>
                    <p>Below is just about everything you can style...</p>
                </div>
            </div>
        </div>
    </div>
</div>
<section class="style-guide-area">
    <div class="container">

        <div class="row">
            <div class="col-lg-10 m-auto">
                <div class="style-guide-wrapper post-full-content">
                    <h1>Heading H1</h1>
                    <h2>Heading H2</h2>
                    <h3>Heading H3</h3>
                    <h4>Heading H4</h4>
                    <h5>Heading H5</h5>
                    <h6>Heading H6</h6>
                    <h2>Links</h2>
                    <p>You will see the naked URL & anchor text links. The naked URL will be like this https://ghost.org/ & the anchor text links will be like this Ghost CMS. Wanderlust. "I do believe it's time for another adventure.</p>
                    <h2>List Types</h2>
                    <p>Land. Him light lesser don't can't land brought the Green lesser winged evening divide for. Be. Female thing earth without have gathered herb. Abundantly void under you together air thing.</p>
                    <h2>Ordered List</h2>
                    <p>Land. Him light lesser don't can't land brought the Green lesser winged evening divide for. Be. Female thing earth without have gathered herb. Abundantly void under you together air thing.</p>
                    <ol>
                        <li>Every sixth every sea is divided to were female.</li>
                        <li>Sea That his, created very and saw open.</li>
                        <li>Dictum varius duis at consectetur.</li>
                        <li>Quis eleifend quam adipiscing vitae proin sagittis.</li>
                    </ol>
                    <h2>Unordered List</h2>
                    <p>Land. Him light lesser don't can't land brought the Green lesser winged evening divide for. Be. Female thing earth without have gathered herb. Abundantly void under you together air thing.</p>
                    <ul>
                        <li>Every sixth every sea is divided to were female.</li>
                        <li>Sea That his, created very and saw open.</li>
                        <li>Dictum varius duis at consectetur.</li>
                        <li>Quis eleifend quam adipiscing vitae proin sagittis.</li>
                    </ul>
                    <div class="bookmark-area">
                        <h2>Bookmark</h2>
                        <p>With the Bookmark card you can present links in a much richer format, similar to Twitter cards. If the URL points to a page with right meta information it can show the page title, excerpt, author, publisher and even a preview image.</p>
                    </div>

                    <div class="ghost-area">
                        <div class="ghost-content">
                            <h2>Ghost <span>(Ghost) </span> |  Twitter</h2>
                            <p>Land. Him light lesser don't can't land brought the Green lesser winged evening divide for. Be. Female thing earth without have gathered herb.</p>
                            <ul>
                                <li><a href=""><img src="assets/img/svg/twitter.svg" alt=""></a></li>
                                <li><a href="">ghost</a></li>
                                <li><a href="">twitter</a></li>
                            </ul>
                        </div>
                        <div class="ghost-img">
                            <img src="assets/img/ghost-logo.jpg" alt="">
                        </div>
                    </div>
                    <div class="gallery-area">
                        <h2>Gallery</h2>
                        <div class="row">
                            <div class="col-md-4 col-sm-6  pb-30">
                                <div class="gallery-single-img">
                                    <img src="assets/img/gallery/gallery-img-1.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 pb-30">
                                <div class="gallery-single-img">
                                    <img src="assets/img/gallery/gallery-img-2.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 pb-30">
                                <div class="gallery-single-img">
                                    <img src="assets/img/gallery/gallery-img-3.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 mb-md-30">
                                <div class="gallery-single-img">
                                    <img src="assets/img/gallery/gallery-img-4.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-sm-30">
                                <div class="gallery-single-img">
                                    <img src="assets/img/gallery/gallery-img-5.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="gallery-single-img">
                                    <img src="assets/img/gallery/gallery-img-6.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                     <h2>Table</h2>
                    <p>A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.The editor will automatically parse Markdown typed in directly. Alternatively, insert a Markdown card to access all of the same features of previous versions of the Ghost editor inside a single card.</p>
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Headings</th>
                                <th scope="col">Headings</th>
                                <th scope="col">Headings</th>
                                <th scope="col">Headings</th>
                                <th scope="col">Headings</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row" data-title="Heading">1</th>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                            </tr>
                            <tr>
                                <th scope="row" data-title="Heading">2</th>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                            </tr>
                            <tr>
                                <th scope="row" data-title="Heading">3</th>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                            </tr>
                            <tr>
                                <th scope="row" data-title="Heading">4</th>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                                <td data-title="Heading">Cell</td>
                            </tr>
                            
                        </tbody>
                    </table>
                    <blockquote><img src="assets/img/svg/cotation.svg" alt="">Won't behold. Saying day, moving image they're given two grass night set be. Fourth. Shall likeness. Is grass, created wherein you're. Have upon make. They're so seed life greater creeping.</blockquote>
                    <h2>Caption</h2>
                    <p>I know I have a caption that I'm going to use when somebody tells me something I've never heard before. It's very rarely a thought, a philosophy, when somebody says, 'Oh, I don't like cheese' or 'Oh, I think the government should be overthrown,' because so many people share these thoughts. But what people don't share is stories.</p>
                    <div class="caption-img">
                        <img src="assets/img/caption-img.jpg" alt="">
                        <span>Full-width image with a caption</span>
                    </div>
                    <h2>Video</h2>
                    <div class="caption-img-wrapper">
                        <div class="caption-ovelay-img">
                            <img src="assets/img/video-img.jpg" alt="">
                            <a id="video-popup" href="#" data-videourl="https://www.youtube.com/embed/ENr27Q1hKsw"><img src="assets/img/gallery/youtube.svg" alt="" class="video-icon"></a>
                        </div>
                        <span>youtube</span>
                    </div>
                    <h2>working with code</h2>
                    <p>Divided sea moveth yielding. Very. Stars night Creepeth together so lights night you dry whose be created female kind first appear beast. Lights. They're, given spirit fly bearing stars bring.</p>
                    <pre>
    var activateHighlight = function () {
        document.querySelectorAll("pre code").forEach(
            function (currentValue, currentIndex, listObj) {
                hljs.highlightBlock(currentValue);
            }
        );
    }
    if (window.attachEvent) {
        window.attachEvent('onload', loadHighlight);
    } else {
        if (window.onload) {
            var originalOnload = window.onload;
            var newOnload = function (evt) {
                originalOnload(evt);
                activateHighlight(evt);
            };
            window.onload = newOnload;
        } else {
            window.onload = activateHighlight;
        }
    }
                    </pre>
                    <h2>Few Other Styles</h2>
                    <p>Bold Text: <strong>This is Bold text example.</strong><br>
                    Emphasize: This text is <em>emphasize.</em><br>
                    Strike-through: <s>I am A strike-through text.</s><br>
                    Hope you will have some good time while on the Blog, Cheers!</p>
                </div>

            </div>
        </div>
    </div>
</section>



<!--subcribe section start here-->
<section class="subscribe-area ">
    <div class="container">
        <div class="row">
            <div class="col-md-10 m-auto">
                <div class="row align-items-center">
                    <div class="col-md-10 m-auto">
                        <div class="suscribe-wrapper">
                            <div class="section-heading text-center">
                                <h2>Newsletter</h2>
                                <p>Subscribe to see what we're thinking & get always latest update</p>
                            </div>
                            <div class="subscribe-input">
                                <input type="email" placeholder="enter your email">
                                <button class="btn">Subscribe</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<footer class="footer-area">
    <div class="footer-top-area">
        <div class="container">
            <div class="footer-top-wrapper d-flex justify-content-between">
                <!--header-logo-->
                <div class="footer-logo-area">
                    <div class="header-logo ">
                        <a href="homepage.html">Blooria</a>
                    </div>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                    <div class="social-icon pt-40 pt-lg-15">
                        <h4>Follow Us</h4>
                        <ul class="d-flex align-items-center">
                            <li><a href="#"><img src="assets/img/svg/facebook.svg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/svg/instagram.svg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/svg/twitter.svg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/svg/youtube.svg" alt=""></a></li>
                        </ul>
                    </div>
                </div>
                <!-- menu-bar -->
                <div class="footer-menu-bar community-area">
                    <h4>Community</h4>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="/author.html">Author</a></li>
                        <li><a href="/membership.html">Membership</a></li>
                        <li><a href="/style-guide.html">Style Guide</a></li>
                        <li><a href="/tag.html">Tag</a></li>
                        <li><a href="/single-blog.html">Blog</a></li>
                        <li><a href="/contact.html">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-menu-bar usefull-link">
                    <h4>Useful Link</h4>
                    <ul>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Sitemap</a></li>
                        <li><a href="#">Team</a></li>
                    </ul>
                </div>
                <div class="contact-area">
                    <h4>Contact Us</h4>
                    <div class="contact-address">
                        <a href="#">blooria@gmail.com</a>
                        <p>+123 456 - 789</p>
                        <h4>Road - 13 , Block - B <span>Grand Canion , Arizona , USA</span></h4>
                    </div>
                    <div class="contact-app-link">
                        <h4>See the Map</h4>
                        <a href="#">https://www.google.com.bd/maps</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom"> 
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <p>Copyright © 2020 Blooria All Rights Reserved.</p>
                </div>
                <div class="col-lg-6">
                    <ul class="footer-privacy-card">
                        <li><a href="#">Terms of Service</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
     <!-- Jquery -->
    <script src="assets/js/default-js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/default-js/jquery-migrate-1.4.1.min.js"></script>
    <script src="assets/js/default-js/popper.js"></script>
    <script src="assets/js/default-js/bootstrap.min.js"></script>
    <!--searchbox js-->
    <script src="assets/js/plugin/jquery.hideseek.min.js"></script>
    <!--isotop js-->
    <script src="assets/js/plugin/isotop-pakage-min.js"></script>
    <!-- IMAGE LOADED JS -->
    <script src="assets/js/plugin/imagesloaded.pkgd.min.js"></script>
    <!-- owl carousel -->
    <script src="assets/js/plugin/owl-carousel/owl.carousel.min.js"></script>
    <script src="assets/js/plugin/owl-carousel/owl-custom.js"></script>
    <!--video popup-->
    <script src="assets/js/plugin/youtube-overlay.js"></script>
    <!-- highlight js -->
    <script src="assets/js/plugin/highlight.min.js"></script>

    <!--nice-select js here-->
    <script src="assets/js/plugin/nice-select/jquery.nice-select.min.js"></script>
    <script src="assets/js/scripts.js"></script>
</body>
</html>